关于谷歌Google Maps JavaScript API 的学习与分享

最近参与页面插入谷歌地图API的项目，因此在此分享下我的学习经验，第一次写，请多担待！

首先，讲下项目的需求，在网页进行点击产品列表，渲染对应的地图信息以及对应的详情信息，并且修改谷歌固有标签以及点击标签出现model，展示详细信息以及对应的产品。

加载谷歌API并插入页面

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
   
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
    </script>
  </body>
</html>

并且公司需要我们在地图高度变高时，需要对标签进行统计，正好Google maps api中正好有对这一方面进行设计，就是‘Marker Clustering’ 【标记聚类】

 <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
 <script>
var locations = [
        {lat: -31.563910, lng: 147.154312},
        {lat: -33.718234, lng: 150.363181},
        {lat: -33.727111, lng: 150.371124},
        {lat: -33.848588, lng: 151.209834},
        {lat: -33.851702, lng: 151.216968},
        {lat: -34.671264, lng: 150.863657},
        {lat: -35.304724, lng: 148.662905},
        {lat: -36.817685, lng: 175.699196},
        {lat: -36.828611, lng: 175.790222},
        {lat: -37.750000, lng: 145.116667},
        {lat: -37.759859, lng: 145.128708},
        {lat: -37.765015, lng: 145.133858},
   
      ]
  // 遍历所有坐标点并添加
var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        // 添加聚类标签 imagePath：标签图片样式
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
</script>

如果需要对聚类标签进行样式修改，可以使用：

map.data.Setstyle(function(){
          var magitude = featrue.getProperty('map');
          return {
             icon:getCircle(magitude);
            
          }
});
function gitCircle(magitude){
         var circle = {
               path:google.maps.Symbolpath.CIRCLE,
               scale:magnitude,
         };
         return circle;
  }

gitCircle() 绘制了一个自定义的圆形，并且回调会maps作为自定义标签。

初始化渲染完地图后，需要对地图的交互动作进行监听

自我认为经常用到的动作事件：

bounds-changed：界面发生变化
center-changed：中心点发生变化
click：单击
dbclick:双击
drag:拖动
heading-changed:标题改变
maptypeid：地图样式改变
mousemove：在地图中移动
rightclick:高度点击
zoom-changed:地图高度发生改变

添加事件：

map.addListener('dbclick',function(){})

标记点添加事件：

markers.map(function(v){
    v.addListener('click',function(){})
})

删除事件：[removeListener]

并且项目中有一需求，需要对详细地址进行转换为经纬度，因此需要采用Google Maps Geocoding API请求接口

将地址信息转换为经纬度：

$.get('https://maps.googleapis.com/maps/api/geocode/json?address='地址信息'&key=YOUR_API_KEY'，(data)=>{
        latLng = data.results[0].geomety.location
})

将经纬度转换为地址信息

$.get('https://maps.googleapis.com/maps/api/geocode/json?latlng=经度,纬度&key=YOUR_API_KEY',=>(data){
     inWhere = data.plus_code.compound_code 
})

以上是我在一个小项目中主要参考的google maps API 以及 Google Maps Geocoding API 的地方

具体文档：
google maps API

Google Maps Geocoding API

关于谷歌Google Maps JavaScript API 的学习与分享

潘雄

引用和评论

Css、JS实现下划线动效

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号